body {
  margin: 0;
  font-family: Arial, sans-serif;  /* Esto hace que la fuente sea en arial y si no se encuentra esta la otra */
  background-color: #f5f5f5; /* Color de la pagina */
}

/* Encabezadito */
.encabezadito {
  display: flex; 
  justify-content: space-between; /* Distribuye el logo a la izquierda y el menú a la derecha */
  align-items: center; /* Alinea verticalmente */
  background-color: #032f40;
  padding: 10px 20px;
  color: #DBDBDB;
}

.logo img {
  height: 60px;
}

.nav a {
  color: #DBDBDB;
  text-decoration: none;
  margin-left: 15px;
  font-size: 16px;
  transition: color 0.3s ease; /* Efecto suave al cambiar de color */
}

.nav a:hover {
  color: #fff; /* Se ilumina al pasar el mouse */
}

/* Contenido principal */
.contenido {
  max-width: 1000px; /* Aqui limite el ancho de pixeles para que no se pase */
  margin: 20px auto; /* Aqui es para que se pueda ajustar el contenido al centro el margen esta a 20px y lo demas en auto */
  padding: 20px; /* Lo mismo que el anterior pero en todos lados */
  text-align: center; /* Centro del texto aqui */
}

.contenido h1 { /* Aqui modifica el comando h1 haciendo que cada vez que lo pongamos se ponga en esta configuracion es para el titulo */
  color: #032f40;
  margin-bottom: 10px; /* Es un espaciado */
}

.contenido p { /* Lo mismo pero con letras */
  color: #333;
}

.cartita { /* Es la creacion de las tarjetitas que vemos de la musica y esto por cierto el nombre "cartita" no lo cambies debido que si lo cambias deja de funcionar los demas, dependen de los demas*/
  display: flex; /* Organiza los elementos */
  align-items: center; /* Alinea al centro */
  margin: 40px 0;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px; /* hace que los bordes no sean cuadrados si no circulares */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Esto lo vi en youtube la vdd asi que solo entendi que pues es la sombrita que da */
  transition: transform 0.3s ease;  /* Transición para todo el cuadro lo vi en youtube esto */
}

.cartita:hover {
  transform: scale(1.05);  /* esto hace que cuando pases el cursor se haga zoom es padre JSAJSKD*/
}

.cartita:nth-of-type(even) {
  flex-direction: row-reverse; /* Esto tmb lo vi en youtube hace que los pares sean invertidas esto hace que las imagenes se vean como estan en las tarjetas */
}

.cartita-imagen img { /* Como dice su nombre esto hace que las imagenes tengan esa configuracion */
  width: 300px;
  height: auto;
}

.cartita-texto { /* Esto acomoda las letras que no se vean raras o achocadas las hace ver como esta en la pagina web */
  flex: 1;
  padding: 0 20px;
  text-align: left;
}

.cartita-texto h2 { /* esto hace que el subtilo de la carta se vea asi */
  color: #032f40;
  margin-bottom: 10px;  /* deja un espacio */
}

.cartita-texto p { /* en las letras */
  color: #555;
  line-height: 1.6; /* es el espacio vertical que hay */
}

/* Pie de página */
.pie {
  background-color: #032f40;
  color: #DBDBDB;
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}